<!DOCTYPE html>
<html>
<head>
    

    

    



    <meta charset="utf-8">
    
    
    
    
    <title>CSS3的再学习 | SongKaBaKa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <meta name="theme-color" content="#3F51B5">
    
    
    <meta name="keywords" content="">
    <meta name="description" content="CSS3的再学习display首先需要了解块元素与行内元素的区别:块元素：  独占一行，宽度默认100% 可设置宽高，仍独占一行 拥有padding和margin属性  行内元素：  不会独占一行，排不下再换行 宽度由内容撑起 设置宽高无效 margin和padding：水平产生边距效果，垂直无效  行内块元素，两者合并，行内排布，可设宽高。 list-item：指定对象为列表项目简单的不重复了，">
<meta property="og:type" content="article">
<meta property="og:title" content="CSS3的再学习">
<meta property="og:url" content="https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/index.html">
<meta property="og:site_name" content="SongKaBaKa">
<meta property="og:description" content="CSS3的再学习display首先需要了解块元素与行内元素的区别:块元素：  独占一行，宽度默认100% 可设置宽高，仍独占一行 拥有padding和margin属性  行内元素：  不会独占一行，排不下再换行 宽度由内容撑起 设置宽高无效 margin和padding：水平产生边距效果，垂直无效  行内块元素，两者合并，行内排布，可设宽高。 list-item：指定对象为列表项目简单的不重复了，">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2020-09-27T06:02:21.355Z">
<meta property="article:modified_time" content="2020-11-17T09:24:54.350Z">
<meta property="article:author" content="Song Wani">
<meta name="twitter:card" content="summary">
    
    <link rel="shortcut icon" href="/blog/favicon.ico">
    <link rel="stylesheet" href="//unpkg.com/hexo-theme-material-indigo@latest/css/style.css">
    <script>window.lazyScripts=[]</script>

    <!-- custom head -->
    

<meta name="generator" content="Hexo 4.2.1"></head>

<body>
    <div id="loading" class="active"></div>

    <aside id="menu" class="hide" >
  <div class="inner flex-row-vertical">
    <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menu-off">
        <i class="icon icon-lg icon-close"></i>
    </a>
    <div class="brand-wrap" style="background-image:url(/blog/img/brand.jpg)">
      <div class="brand">
        <a href="/blog/" class="avatar waves-effect waves-circle waves-light">
          <img src="/blog/img/avatar.jpg">
        </a>
        <hgroup class="introduce">
          <h5 class="nickname">Song Wani</h5>
          <a href="mailto:bugsong@wo.cn" title="bugsong@wo.cn" class="mail">bugsong@wo.cn</a>
        </hgroup>
      </div>
    </div>
    <div class="scroll-wrap flex-col">
      <ul class="nav">
        
            <li class="waves-block waves-effect">
              <a href="/blog/"  >
                <i class="icon icon-lg icon-home"></i>
                主页
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/archives"  >
                <i class="icon icon-lg icon-archives"></i>
                Archives
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/tags"  >
                <i class="icon icon-lg icon-tags"></i>
                Tags
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="/blog/categories"  >
                <i class="icon icon-lg icon-th-list"></i>
                Categories
              </a>
            </li>
        
            <li class="waves-block waves-effect">
              <a href="https://songbug.gitee.io/blog" target="_blank" >
                <i class="icon icon-lg icon-github"></i>
                Github
              </a>
            </li>
        
      </ul>
    </div>
  </div>
</aside>

    <main id="main">
        <header class="top-header" id="header">
    <div class="flex-row">
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light on" id="menu-toggle">
          <i class="icon icon-lg icon-navicon"></i>
        </a>
        <div class="flex-col header-title ellipsis">CSS3的再学习</div>
        
        <div class="search-wrap" id="search-wrap">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="back">
                <i class="icon icon-lg icon-chevron-left"></i>
            </a>
            <input type="text" id="key" class="search-input" autocomplete="off" placeholder="Search">
            <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="search">
                <i class="icon icon-lg icon-search"></i>
            </a>
        </div>
        
        
        <a href="javascript:;" class="header-icon waves-effect waves-circle waves-light" id="menuShare">
            <i class="icon icon-lg icon-share-alt"></i>
        </a>
        
    </div>
</header>
<header class="content-header post-header">

    <div class="container fade-scale">
        <h1 class="title">CSS3的再学习</h1>
        <h5 class="subtitle">
            
                <time datetime="2020-09-27T06:02:21.355Z" itemprop="datePublished" class="page-time">
  2020-09-27
</time>


            
        </h5>
    </div>

    


</header>


<div class="container body-wrap">
    
    <aside class="post-widget">
        <nav class="post-toc-wrap post-toc-shrink" id="post-toc">
            <h4>TOC</h4>
            <ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#CSS3的再学习"><span class="post-toc-number">1.</span> <span class="post-toc-text">CSS3的再学习</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#display"><span class="post-toc-number">1.1.</span> <span class="post-toc-text">display</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#list-item：指定对象为列表项目"><span class="post-toc-number">1.1.0.1.</span> <span class="post-toc-text">list-item：指定对象为列表项目</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#简单的不重复了，讲一下table系列的显示"><span class="post-toc-number">1.1.1.</span> <span class="post-toc-text">简单的不重复了，讲一下table系列的显示</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#table"><span class="post-toc-number">1.1.1.1.</span> <span class="post-toc-text">table</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#inline-table"><span class="post-toc-number">1.1.1.2.</span> <span class="post-toc-text">inline-table</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#table—-可以用作CSS定制表格"><span class="post-toc-number">1.1.1.3.</span> <span class="post-toc-text">table—* 可以用作CSS定制表格</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#caption"><span class="post-toc-number">1.1.1.3.1.</span> <span class="post-toc-text">caption</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#cell"><span class="post-toc-number">1.1.1.3.2.</span> <span class="post-toc-text">cell</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#row、rowgroup"><span class="post-toc-number">1.1.1.3.3.</span> <span class="post-toc-text">row、rowgroup</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#column、columngroup"><span class="post-toc-number">1.1.1.3.4.</span> <span class="post-toc-text">column、columngroup</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#table-header-group"><span class="post-toc-number">1.1.1.3.5.</span> <span class="post-toc-text">table-header-group</span></a></li><li class="post-toc-item post-toc-level-5"><a class="post-toc-link" href="#table-footer-group"><span class="post-toc-number">1.1.1.3.6.</span> <span class="post-toc-text">table-footer-group</span></a></li></ol></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#flex"><span class="post-toc-number">1.1.1.4.</span> <span class="post-toc-text">flex</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#inline-flex"><span class="post-toc-number">1.1.1.5.</span> <span class="post-toc-text">inline-flex</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#grid"><span class="post-toc-number">1.1.1.6.</span> <span class="post-toc-text">grid</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#border"><span class="post-toc-number">1.2.</span> <span class="post-toc-text">border</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#border-style"><span class="post-toc-number">1.2.1.</span> <span class="post-toc-text">border-style</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#box-shadow"><span class="post-toc-number">1.3.</span> <span class="post-toc-text">box-shadow</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#border-radius-圆角"><span class="post-toc-number">1.3.1.</span> <span class="post-toc-text">border-radius 圆角</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#border-image"><span class="post-toc-number">1.3.2.</span> <span class="post-toc-text">border-image</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#border-image-source"><span class="post-toc-number">1.3.3.</span> <span class="post-toc-text">border-image-source</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#background"><span class="post-toc-number">1.4.</span> <span class="post-toc-text">background</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-color"><span class="post-toc-number">1.4.1.</span> <span class="post-toc-text">background-color</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-image"><span class="post-toc-number">1.4.2.</span> <span class="post-toc-text">background-image</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-repeat"><span class="post-toc-number">1.4.3.</span> <span class="post-toc-text">background-repeat</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-attachment-理解为背景依附方式"><span class="post-toc-number">1.4.4.</span> <span class="post-toc-text">background-attachment 理解为背景依附方式</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#fixed"><span class="post-toc-number">1.4.4.1.</span> <span class="post-toc-text">fixed</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#scroll"><span class="post-toc-number">1.4.4.2.</span> <span class="post-toc-text">scroll</span></a></li><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#local"><span class="post-toc-number">1.4.4.3.</span> <span class="post-toc-text">local</span></a></li></ol></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-position"><span class="post-toc-number">1.4.5.</span> <span class="post-toc-text">background-position</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-origin"><span class="post-toc-number">1.4.6.</span> <span class="post-toc-text">background-origin</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-clip"><span class="post-toc-number">1.4.7.</span> <span class="post-toc-text">background-clip</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#background-size"><span class="post-toc-number">1.4.8.</span> <span class="post-toc-text">background-size</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#透明度opacity，包在了颜色里"><span class="post-toc-number">1.5.</span> <span class="post-toc-text">透明度opacity，包在了颜色里</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#列表"><span class="post-toc-number">1.6.</span> <span class="post-toc-text">列表</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#list-style"><span class="post-toc-number">1.6.1.</span> <span class="post-toc-text">list-style</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#表格"><span class="post-toc-number">1.7.</span> <span class="post-toc-text">表格</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#table-layout"><span class="post-toc-number">1.7.1.</span> <span class="post-toc-text">table-layout</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#边框折叠、合并-border-collapse"><span class="post-toc-number">1.7.2.</span> <span class="post-toc-text">边框折叠、合并 border-collapse</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#border-spacing-边框的间距，区别于cell-spacing"><span class="post-toc-number">1.7.3.</span> <span class="post-toc-text">border-spacing  边框的间距，区别于cell-spacing</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#caption-side"><span class="post-toc-number">1.7.4.</span> <span class="post-toc-text">caption-side</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#empty-cells"><span class="post-toc-number">1.7.5.</span> <span class="post-toc-text">empty-cells</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-4"><a class="post-toc-link" href="#hide，show"><span class="post-toc-number">1.7.5.1.</span> <span class="post-toc-text">hide，show</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#content，目前遇到还是在伪对象中"><span class="post-toc-number">1.8.</span> <span class="post-toc-text">content，目前遇到还是在伪对象中</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#伸缩盒学习"><span class="post-toc-number">1.9.</span> <span class="post-toc-text">伸缩盒学习</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#父容器的属性："><span class="post-toc-number">1.9.1.</span> <span class="post-toc-text">父容器的属性：</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#子元素属性值"><span class="post-toc-number">1.9.2.</span> <span class="post-toc-text">子元素属性值</span></a></li></ol></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#弹性元素组合定义规则"><span class="post-toc-number">1.10.</span> <span class="post-toc-text">弹性元素组合定义规则</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#order调整先后顺序"><span class="post-toc-number">1.11.</span> <span class="post-toc-text">order调整先后顺序</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#万万没想到也可以对文本做弹性布局"><span class="post-toc-number">1.12.</span> <span class="post-toc-text">万万没想到也可以对文本做弹性布局</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#使用margin-right：auto；自动撑满右侧空间"><span class="post-toc-number">1.13.</span> <span class="post-toc-text">使用margin-right：auto；自动撑满右侧空间</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#响应式布局"><span class="post-toc-number">1.14.</span> <span class="post-toc-text">响应式布局</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#一般项目必备头部"><span class="post-toc-number">1.15.</span> <span class="post-toc-text">一般项目必备头部</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#viewport"><span class="post-toc-number">1.15.1.</span> <span class="post-toc-text">viewport</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#X-UA-Compatible"><span class="post-toc-number">1.15.2.</span> <span class="post-toc-text">X-UA-Compatible</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#renderer"><span class="post-toc-number">1.15.3.</span> <span class="post-toc-text">renderer</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#网页知识"><span class="post-toc-number">1.15.4.</span> <span class="post-toc-text">网页知识</span></a></li><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#小结"><span class="post-toc-number">1.15.5.</span> <span class="post-toc-text">小结</span></a></li></ol></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#JavaScript部分"><span class="post-toc-number">2.</span> <span class="post-toc-text">JavaScript部分</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#forEach用来遍历数组"><span class="post-toc-number">2.1.</span> <span class="post-toc-text">forEach用来遍历数组</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#return会结束函数运行"><span class="post-toc-number">2.2.</span> <span class="post-toc-text">return会结束函数运行</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-3"><a class="post-toc-link" href="#垃圾回收机制"><span class="post-toc-number">2.2.1.</span> <span class="post-toc-text">垃圾回收机制</span></a></li></ol></li></ol></li></ol>
        </nav>
    </aside>


<article id="post-CSS3的再学习"
  class="post-article article-type-post fade" itemprop="blogPost">

    <div class="post-card">
        <h1 class="post-card-title">CSS3的再学习</h1>
        <div class="post-meta">
            <time class="post-time" title="2020-09-27 14:02:21" datetime="2020-09-27T06:02:21.355Z"  itemprop="datePublished">2020-09-27</time>

            


            
<span id="busuanzi_container_page_pv" title="文章总阅读量" style='display:none'>
    <i class="icon icon-eye icon-pr"></i><span id="busuanzi_value_page_pv"></span>
</span>


        </div>
        <div class="post-content" id="post-content" itemprop="postContent">
            <h1 id="CSS3的再学习"><a href="#CSS3的再学习" class="headerlink" title="CSS3的再学习"></a>CSS3的再学习</h1><h2 id="display"><a href="#display" class="headerlink" title="display"></a>display</h2><p>首先需要了解块元素与行内元素的区别:<br>块元素：</p>
<ol>
<li>独占一行，宽度默认100%</li>
<li>可设置宽高，仍独占一行</li>
<li>拥有padding和margin属性</li>
</ol>
<p>行内元素：</p>
<ol>
<li>不会独占一行，排不下再换行</li>
<li>宽度由内容撑起</li>
<li>设置宽高无效</li>
<li>margin和padding：水平产生边距效果，垂直无效</li>
</ol>
<p>行内块元素，两者合并，行内排布，可设宽高。</p>
<h4 id="list-item：指定对象为列表项目"><a href="#list-item：指定对象为列表项目" class="headerlink" title="list-item：指定对象为列表项目"></a>list-item：指定对象为列表项目</h4><h3 id="简单的不重复了，讲一下table系列的显示"><a href="#简单的不重复了，讲一下table系列的显示" class="headerlink" title="简单的不重复了，讲一下table系列的显示"></a>简单的不重复了，讲一下table系列的显示</h3><p>目的是将元素作为列表对待，方便处理。应该很少用到，大部分布局应该涉及到伸缩盒。</p>
<h4 id="table"><a href="#table" class="headerlink" title="table"></a>table</h4><p>指定对象为块表格。类同于table标签</p>
<h4 id="inline-table"><a href="#inline-table" class="headerlink" title="inline-table"></a>inline-table</h4><p>指定对象为行内表格。类同于table</p>
<h4 id="table—-可以用作CSS定制表格"><a href="#table—-可以用作CSS定制表格" class="headerlink" title="table—* 可以用作CSS定制表格"></a>table—* 可以用作CSS定制表格</h4><ol>
<li><h5 id="caption"><a href="#caption" class="headerlink" title="caption"></a>caption</h5><p>作为表格标题，有专有的caption和th标签，应该是一个意思，区别于下面对应的thead</p>
</li>
<li><h5 id="cell"><a href="#cell" class="headerlink" title="cell"></a>cell</h5><p>单元格td标签</p>
</li>
<li><h5 id="row、rowgroup"><a href="#row、rowgroup" class="headerlink" title="row、rowgroup"></a>row、rowgroup</h5><p>表格行的用法，tr标签和tbody标签</p>
</li>
<li><h5 id="column、columngroup"><a href="#column、columngroup" class="headerlink" title="column、columngroup"></a>column、columngroup</h5><p>col，列标签，不怎么用；另一个便是colgroup，表格列组标签</p>
</li>
<li><h5 id="table-header-group"><a href="#table-header-group" class="headerlink" title="table-header-group"></a>table-header-group</h5><p>表格标题组标签，thead。注意区分，H5中的这玩意没有-er后缀</p>
</li>
<li><h5 id="table-footer-group"><a href="#table-footer-group" class="headerlink" title="table-footer-group"></a>table-footer-group</h5><p>指定对象作为表格脚注组，类似于tfoot标签，注意也没有-er后缀</p>
</li>
</ol>
<h4 id="flex"><a href="#flex" class="headerlink" title="flex"></a>flex</h4><p>将对象作为弹性伸缩盒显示。应该是块级的东西，根据下面这一条推测。</p>
<h4 id="inline-flex"><a href="#inline-flex" class="headerlink" title="inline-flex"></a>inline-flex</h4><p>将对象作为内联块级弹性伸缩盒显示。</p>
<h4 id="grid"><a href="#grid" class="headerlink" title="grid"></a>grid</h4><p>栅格系统，给页面当中的容器划分块级区域。有点回归表格的意思。兼容性存在问题。</p>
<h2 id="border"><a href="#border" class="headerlink" title="border"></a>border</h2><p>这个是集合写的东西，宽度 样式 颜色</p>
<p>也可以带着方向写，border-方向-属性</p>
<p>索性将其相关联的元素都写在这个类目下面了</p>
<h3 id="border-style"><a href="#border-style" class="headerlink" title="border-style"></a>border-style</h3><p>也可以带着方向写，border-方向-属性</p>
<p>写一下样式，常用的有实线solid，点状线dotted，虚线轮廓dashed，none就是没有</p>
<h2 id="box-shadow"><a href="#box-shadow" class="headerlink" title="box-shadow"></a>box-shadow</h2><p>这个做特效应该用得到。</p>
<p>属性值：none无阴影</p>
<p>四个长度值：阴影水平偏移，阴影垂直偏移，模糊半径+，外延值+</p>
<p>insert决定内外阴影。</p>
<p>写法是2-4个px数值 颜色 可有可无的insert； </p>
<h3 id="border-radius-圆角"><a href="#border-radius-圆角" class="headerlink" title="border-radius 圆角"></a>border-radius 圆角</h3><p>亦可以分开单独设置，但是这里不是上下左右了，而是：<br>上左，上右，下右，下左。给定2-4个值的作用可以类比边框理解。</p>
<h3 id="border-image"><a href="#border-image" class="headerlink" title="border-image"></a>border-image</h3><p>貌似目前用处不大，不再过多赘述。</p>
<p>这是一个总写的键，就像不能将background只理解为背景颜色，应该使用专有的背景颜色（background-color）。</p>
<p>可以给定多个属性值：资源 切片 宽度 外延 平铺；</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">border-image: url(skin/button.png) 2 9 fill repeat;</span><br></pre></td></tr></table></figure>

<h3 id="border-image-source"><a href="#border-image-source" class="headerlink" title="border-image-source"></a>border-image-source</h3><p>可以指定图片或者使用函数进行渐变</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">border-image-source: url(skin&#x2F;border.png);</span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">.test &#123;</span><br><span class="line">	border: 10px solid;</span><br><span class="line">	border-image: linear-gradient(red, yellow) 10;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="background"><a href="#background" class="headerlink" title="background"></a>background</h2><p>这是一个总写属性，我总是将它理解为背景颜色，太片面了，现在记住了！</p>
<p>总写顺序是：算了建议单写，总写有点复杂</p>
<p>接触了一个新东西，定义多重背景！中间应该用逗号分着写：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span> <span class="attr">lang</span>=<span class="string">"zh-cmn-Hans"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span>Multiple backgrounds_CSS参考手册_web前端开发参考手册系列<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"author"</span> <span class="attr">content</span>=<span class="string">"Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com"</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="css"><span class="selector-class">.test</span> &#123;</span></span><br><span class="line">width: 300px;</span><br><span class="line">height: 300px;</span><br><span class="line">background: url(skin/p_103x196_1.jpg) no-repeat 10px 20px/60px 60px padding-box,</span><br><span class="line">		   url(skin/p_103x196_1.jpg) no-repeat 50px 60px/60px 80px padding-box,</span><br><span class="line">		   url(skin/p_103x196_1.jpg) no-repeat 90px 100px/60px padding-box #aaa;</span><br><span class="line">&#125;</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"test"</span>&gt;</span>定义多重背景图像<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="background-color"><a href="#background-color" class="headerlink" title="background-color"></a>background-color</h3><p>默认是透明，就是transparent</p>
<h3 id="background-image"><a href="#background-image" class="headerlink" title="background-image"></a>background-image</h3><p>背景图片，按道理可以个一个或多个，最后使用渐变函数调整背景颜色：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">background-image: url(skin/p_103x196_1.jpg),</span><br><span class="line">				  url(skin/p_103x196_2.jpg),</span><br><span class="line">				  url(skin/p_103x196_3.jpg),</span><br><span class="line">				  linear-gradient(to top, #45B5DA, #0382AD);</span><br></pre></td></tr></table></figure>

<h3 id="background-repeat"><a href="#background-repeat" class="headerlink" title="background-repeat"></a>background-repeat</h3><p>默认是平铺的，可以通过修改它的值来阻止平铺。</p>
<p>新的俩属性</p>
<p><strong>round</strong>：当背景图像不能以整数次平铺时，会根据情况缩放图像。<br><strong>space</strong>：当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。</p>
<h3 id="background-attachment-理解为背景依附方式"><a href="#background-attachment-理解为背景依附方式" class="headerlink" title="background-attachment 理解为背景依附方式"></a>background-attachment 理解为背景依附方式</h3><h4 id="fixed"><a href="#fixed" class="headerlink" title="fixed"></a>fixed</h4><p>固定在那里，窗口滚动背景不滚动，类似于手机全局壁纸。</p>
<h4 id="scroll"><a href="#scroll" class="headerlink" title="scroll"></a>scroll</h4><p>这个有点抽象，不随元素滚动，随着祖先窗口滚动。但是依旧可以类比，天天酷跑吧，背景不随着角色动，随着角色前进整体的位置动；另外可以比喻为老式电影放映机，在小窗口内竟然可以看到里面的内容滚动。</p>
<h4 id="local"><a href="#local" class="headerlink" title="local"></a>local</h4><p>相对于元素固定，元素走背景走。类似于小窗口刷哔哩哔哩。内容走背景走。</p>
<h3 id="background-position"><a href="#background-position" class="headerlink" title="background-position"></a>background-position</h3><p>相对于盒子左上角，可以使用百分比和像素来进行起点偏移。</p>
<p>也可以使用四个方位名词和center来进行定位。</p>
<p>接受1-4个参数，常规理解。</p>
<h3 id="background-origin"><a href="#background-origin" class="headerlink" title="background-origin"></a>background-origin</h3><p>这个就有点有趣了，可以将背景图片放到外边距盒，内边距盒，边框线盒，作为起点。</p>
<p>以上范围提及和包含。</p>
<p>但是叫盒还是比较准确地，虽然有点别扭。</p>
<h3 id="background-clip"><a href="#background-clip" class="headerlink" title="background-clip"></a>background-clip</h3><p>背景的剪裁，属性有上面提到的三种盒，另外还可以做文字遮罩效果，就多了一个text属性，看来是专门给文字用的。</p>
<h3 id="background-size"><a href="#background-size" class="headerlink" title="background-size"></a>background-size</h3><p>找到了我一直纠结的东西，究竟如何把这个背景进行改变，这里提供了几个属性值：</p>
<p>auto（图像真实大小），cover（拉伸覆盖），contain（长宽任意一处碰壁）</p>
<p>另外可以指定百分比、px来手动调节。</p>
<h2 id="透明度opacity，包在了颜色里"><a href="#透明度opacity，包在了颜色里" class="headerlink" title="透明度opacity，包在了颜色里"></a>透明度opacity，包在了颜色里</h2><p>属性值0-1</p>
<h2 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h2><h3 id="list-style"><a href="#list-style" class="headerlink" title="list-style"></a>list-style</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">type(disc,circle,square,decimal) position(outside,inside) image(url,none)</span><br></pre></td></tr></table></figure>

<p>也不分这写了，就这样理解吧，从并不复杂，单独使用的话也简洁明了。</p>
<p>单独写是 list-style-*</p>
<h2 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h2><h3 id="table-layout"><a href="#table-layout" class="headerlink" title="table-layout"></a>table-layout</h3><p><strong>auto</strong>：默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢</p>
<p><strong>fixed</strong>：固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切</p>
<h3 id="边框折叠、合并-border-collapse"><a href="#边框折叠、合并-border-collapse" class="headerlink" title="边框折叠、合并 border-collapse"></a>边框折叠、合并 border-collapse</h3><p>两个属性值：</p>
<p><strong>separate</strong>：边框独立</p>
<p><strong>collapse</strong>：相邻边被合并</p>
<h3 id="border-spacing-边框的间距，区别于cell-spacing"><a href="#border-spacing-边框的间距，区别于cell-spacing" class="headerlink" title="border-spacing  边框的间距，区别于cell-spacing"></a>border-spacing  边框的间距，<em>区别于cell-spacing</em></h3><p>属性值是px</p>
<h3 id="caption-side"><a href="#caption-side" class="headerlink" title="caption-side"></a>caption-side</h3><p>就是表格标题的位置，竟然可以乱跑，注意需要将标题使用caption标签包裹起来</p>
<p>估计是个特化标签。</p>
<p>目前仅适用上和下就足够了，top，bottom</p>
<h3 id="empty-cells"><a href="#empty-cells" class="headerlink" title="empty-cells"></a>empty-cells</h3><p>表格内容为空时的设置，边框是否显示，属性值有</p>
<h4 id="hide，show"><a href="#hide，show" class="headerlink" title="hide，show"></a>hide，show</h4><p>隐藏和显示</p>
<h2 id="content，目前遇到还是在伪对象中"><a href="#content，目前遇到还是在伪对象中" class="headerlink" title="content，目前遇到还是在伪对象中"></a>content，目前遇到还是在伪对象中</h2><p>暂时先不做记录</p>
<h2 id="伸缩盒学习"><a href="#伸缩盒学习" class="headerlink" title="伸缩盒学习"></a>伸缩盒学习</h2><h3 id="父容器的属性："><a href="#父容器的属性：" class="headerlink" title="父容器的属性："></a>父容器的属性：</h3><p>有一个比较老的，flex-direction：column，这会让子垂直布局！</p>
<p><strong>display：flex</strong>；</p>
<p>定义为弹性盒子布局，里面孩子会自动排成一行，称为行内，此时不应用转换为块来实现大小规划，而是使用，justify-content来实现！</p>
<p>（这个也可以使用浮动效果实现）</p>
<p><strong>flex-flow:</strong>这是direction与wrap的综合写法。建议使用这种写法</p>
<p><strong>flex-wrap</strong>：让弹性元素在必要的时折行</p>
<ul>
<li>nowrap 就不换行</li>
<li>wrap 必要时换行，大概就是容不下了</li>
<li>wrap-reverse 必要时换行，不过是以相反的顺序</li>
</ul>
<p><strong>justify-content</strong>：设置或检索弹性盒子的元素在<strong>主轴（不一定是横轴哦，如果改了direction的话）</strong>方向上的对齐方式</p>
<ul>
<li><p>默认值 flex-end 伸缩盒开头</p>
</li>
<li><p>伸缩盒结尾 flex-end</p>
</li>
<li><p>水平居中 center</p>
</li>
<li><p>space-between 用空白做间隔，哇哦，顿悟了</p>
</li>
<li><p>space-around 233太棒了，英语字面意思，空白环绕，每个元素被等距空白环绕。</p>
<p>一个元素直接居中，两边空白</p>
</li>
</ul>
<p><strong>align-items</strong>：设置或检索flex子项在<strong>侧周（纵轴）</strong>方向上的对齐方式，交叉轴对齐方式</p>
<ul>
<li>stretch 拉伸以填满，<strong>指定尺寸优先级高于拉伸</strong>，如果给当前元素高度指定为auto，便会有效果。</li>
<li>center 这不就是垂直居中吗</li>
<li>flex-start 就是居上</li>
<li>flex-end 就是局下！</li>
</ul>
<p><strong>align-content</strong>：<strong>给了flex-flow: * wrap</strong>;<strong>或者给了换行属性才有效果</strong>。</p>
<p>这样他就会换行，这个是设置多行对齐的方法，属性值参考justify-content，evenly是绝对平均，主要区别于space—around的两个元素双倍距离。</p>
<h3 id="子元素属性值"><a href="#子元素属性值" class="headerlink" title="子元素属性值"></a>子元素属性值</h3><p>每一个元素称为一个项目，</p>
<p><strong>flex-grow</strong>：属性值是一个数字，有这个属性的就将数字加起来，按比例分配剩余空间，<strong>默认0</strong></p>
<p>这个会填充掉父级设置的空白环绕或者空白间隔</p>
<p>（margin：上下为0 左右auto；也可以实现水平居中）</p>
<ul>
<li>如果数字仅为一个1，且给到了当前伸缩的所有子元素，那么当前所有元素平均分配剩余空间。</li>
<li>如果数字仅为一个0，给所有是原大小。给某一个是特指伸缩</li>
<li><strong>剩余空间是原大小占用后的剩余空间，进行分配</strong></li>
</ul>
<p><strong>flex-shrink</strong>，正好与上边的相反，<strong>使用这个不要给换行</strong>，在当前行容器容不下的话，按比例缩小！</p>
<ul>
<li><p>如果值是0，就不缩小，保持原大小，溢出也不管。</p>
</li>
<li><p>如果值是1，就等比例缩小。</p>
</li>
<li><p>如果是其他的值，请看以下计算公式<br>$$<br>终宽=原宽-溢出值/（元素1宽<em>缩比1 + 元素2宽</em>缩比2+。。。）<em>某元素缩比</em>该元素原宽<br>$$</p>
</li>
<li></li>
</ul>
<p><strong>flex-basis</strong>，主轴基准尺寸，注意是主轴，受伸缩方向影响</p>
<ul>
<li>横向的话，利用这个结合grow，也能调整盒子的宽度，而不用设置width</li>
<li>优先级顺序是带max的最高，这个高于width</li>
<li>flex-basis表示<strong>伸缩子元素</strong>被放入flex容器之前的大小，也就是<strong>子元素</strong>的理想或者假设大小，但是并不是其真实大小，其真实大小取决于flex容器的宽度，如果不结合grow换行等其他属性，给的这个值使子元素溢出伸缩盒，那么便会溢出；如果给width的话，子元素则会被挤压</li>
</ul>
<h2 id="弹性元素组合定义规则"><a href="#弹性元素组合定义规则" class="headerlink" title="弹性元素组合定义规则"></a>弹性元素组合定义规则</h2><p><strong>统一设置子元素：flex：放大 缩小 主轴基准尺寸；</strong></p>
<p><strong>独立设置子元素：flex：第一个值必须给；</strong></p>
<h2 id="order调整先后顺序"><a href="#order调整先后顺序" class="headerlink" title="order调整先后顺序"></a>order调整先后顺序</h2><p>给到子元素，值越大越靠后！默认是0</p>
<h2 id="万万没想到也可以对文本做弹性布局"><a href="#万万没想到也可以对文本做弹性布局" class="headerlink" title="万万没想到也可以对文本做弹性布局"></a>万万没想到也可以对文本做弹性布局</h2><p>仅仅是文本文字就行，中间可以夹杂一些需要布局的标签，意思就是文本也可以参与伸缩盒的布局。</p>
<p>border0margin0貌似可以去掉无序列表前面的间隔。</p>
<h2 id="使用margin-right：auto；自动撑满右侧空间"><a href="#使用margin-right：auto；自动撑满右侧空间" class="headerlink" title="使用margin-right：auto；自动撑满右侧空间"></a>使用margin-right：auto；自动撑满右侧空间</h2><p>一行指令，省事。</p>
<h2 id="响应式布局"><a href="#响应式布局" class="headerlink" title="响应式布局"></a>响应式布局</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"initial-scale=1.0,width=device-width"</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<p>content内的第一个属性值是缩放倍数，第二个属性值是宽度为设备宽度。针对不同的设备，限制宽度区间，应用不同的样式文件。</p>
<h2 id="一般项目必备头部"><a href="#一般项目必备头部" class="headerlink" title="一般项目必备头部"></a>一般项目必备头部</h2><h3 id="viewport"><a href="#viewport" class="headerlink" title="viewport"></a>viewport</h3><p>视口设置</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0"</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="X-UA-Compatible"><a href="#X-UA-Compatible" class="headerlink" title="X-UA-Compatible"></a>X-UA-Compatible</h3><p>自动匹配IE最高版本</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">http-equiv</span>=<span class="string">"X-UA-Compatible"</span> <span class="attr">content</span>=<span class="string">"ie=edge"</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="renderer"><a href="#renderer" class="headerlink" title="renderer"></a>renderer</h3><p>双核的话使用webkit，组要针对国内浏览器</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"renderer"</span> <span class="attr">content</span>=<span class="string">"webkit"</span> /&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="网页知识"><a href="#网页知识" class="headerlink" title="网页知识"></a>网页知识</h3><p>网页主题色由logo决定，</p>
<h3 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h3><ol>
<li><!DOCTYPE html>
<p>这个是渲染标准，缺少的话会渲染的很怪异</p>
</li>
<li><p>html新增布局标签</p>
<p>header，nav，main，article，section，footer，address，fig（封装图片）…</p>
</li>
<li><p>html5废弃了哪些标签</p>
<p>font，center，big，frame…</p>
</li>
<li><p>标签属性</p>
<ol>
<li><p>form</p>
<p>action，method，autocomplete</p>
</li>
<li><p>link</p>
<p>type，link，rel=”stylesheet”</p>
</li>
<li><p>script</p>
<p>src</p>
</li>
</ol>
</li>
<li><p>css</p>
<p>border，border-radius，box-shadow，opacity，</p>
</li>
<li><p>弹性盒子</p>
</li>
<li><p>单位的使用</p>
<p>尽量不要使用绝对单位，使用相对单位，%，rem（相对于html，em（相对于父级，vh，vw。</p>
</li>
<li><p>权重<br>$$<br>！important(10000)-&gt;style(1000)-&gt;id(100)-&gt;class(10)-&gt;tag(1)<br>$$</p>
</li>
<li></li>
</ol>
<h1 id="JavaScript部分"><a href="#JavaScript部分" class="headerlink" title="JavaScript部分"></a>JavaScript部分</h1><h2 id="forEach用来遍历数组"><a href="#forEach用来遍历数组" class="headerlink" title="forEach用来遍历数组"></a>forEach用来遍历数组</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">arr.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">val,idx</span>)</span>&#123;</span><br><span class="line"></span><br><span class="line">	<span class="built_in">console</span>.log(idx+<span class="string">':'</span>+val);</span><br><span class="line"></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>

<p>可以遍历出下标和值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> key <span class="keyword">in</span> obj)&#123;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(key+<span class="string">':'</span>+boj[key])</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>这样就可以遍历JavaScript对象了</p>
<h2 id="return会结束函数运行"><a href="#return会结束函数运行" class="headerlink" title="return会结束函数运行"></a>return会结束函数运行</h2><p>var 变量=function （）{}</p>
<p>此处没有了函数名，而这个变量等价于函数名</p>
<p>如果需要定义时立即执行函数，可使用IIFE</p>
<p>写法：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">;var sum &#x3D; (function(形参列表)&#123;</span><br><span class="line">	函数体;</span><br><span class="line">	&#x2F;&#x2F;不设置形参的话，可以使用arguments[0] 来获取对应下标的参数</span><br><span class="line">	return</span><br><span class="line">&#125;)(实参列表)</span><br></pre></td></tr></table></figure>

<p>使用arr.join(默认逗号)，可以将数组转转换为字符串</p>
<p>使用’1,2,3’.split(‘,’)，可以将字符串转化为数组</p>
<h3 id="垃圾回收机制"><a href="#垃圾回收机制" class="headerlink" title="垃圾回收机制"></a>垃圾回收机制</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> timer=<span class="literal">null</span></span><br><span class="line"></span><br><span class="line">timer=setInterval(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="built_in">document</span>.body.innerHTML = <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line"></span><br><span class="line">&#125;,<span class="number">1000</span>)</span><br></pre></td></tr></table></figure>

<p>Math对象</p>
<p>（JavaScript对象就像Python的字典，拥有类似Python字典的所有操作）</p>
<p>（构造函数(通过function定义的东西)不能通过函数调用去执行他，而是通过new一个实例取调用它，这个就像Python中的类(使用class定义的东西)，可以创建实例var TaiD = dog() ）</p>
<p>Math.ceil(参数)，向上取整</p>
<p>Math.floor(参数)，向下取整</p>
<p>Math.round(参数)，四舍五入</p>
<p>obj.toFixed(位数)，这个是全局的方法</p>
<p>border-collapse：collapse；单线边框</p>

        </div>

        <blockquote class="post-copyright">
    
    <div class="content">
        
<span class="post-time">
    Last updated: <time datetime="2020-11-17T09:24:54.350Z" itemprop="dateUpdated">2020-11-17 17:24:54</time>
</span><br>


        
        这里可以写作者留言，标签和 hexo 中所有变量及辅助函数等均可调用，示例：<a href="/blog/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/" target="_blank" rel="external">https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/</a>
        
    </div>
    
    <footer>
        <a href="https://gitee.com/songbug/blog.git">
            <img src="/blog/img/avatar.jpg" alt="Song Wani">
            Song Wani
        </a>
    </footer>
</blockquote>

        
<div class="page-reward">
    <a id="rewardBtn" href="javascript:;" class="page-reward-btn waves-effect waves-circle waves-light">赏</a>
</div>



        <div class="post-footer">
            

            
<div class="page-share-wrap">
    

<div class="page-share" id="pageShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/&title=《CSS3的再学习》 — SongKaBaKa&pic=https://gitee.com/songbug/blog.git/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/&title=《CSS3的再学习》 — SongKaBaKa&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《CSS3的再学习》 — SongKaBaKa&url=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/&via=https://gitee.com/songbug/blog.git" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>



    <a href="javascript:;" id="shareFab" class="page-share-fab waves-effect waves-circle">
        <i class="icon icon-share-alt icon-lg"></i>
    </a>
</div>



        </div>
    </div>

    
<nav class="post-nav flex-row flex-justify-between">
  
    <div class="waves-block waves-effect prev">
      <a href="/blog/2020/11/07/CSS%E6%8A%80%E8%83%BD%E8%BF%9B%E9%98%B6/" id="post-prev" class="post-nav-link">
        <div class="tips"><i class="icon icon-angle-left icon-lg icon-pr"></i> Prev</div>
        <h4 class="title">CSS技能进阶</h4>
      </a>
    </div>
  

  
    <div class="waves-block waves-effect next">
      <a href="/blog/2020/09/26/CSS_Animation%E8%BF%9B%E9%98%B6/" id="post-next" class="post-nav-link">
        <div class="tips">Next <i class="icon icon-angle-right icon-lg icon-pl"></i></div>
        <h4 class="title">CSS_Animation进阶</h4>
      </a>
    </div>
  
</nav>



    




















</article>

<div id="reward" class="page-modal reward-lay">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <h3 class="reward-title">
        <i class="icon icon-quote-left"></i>
        谢谢大爷~
        <i class="icon icon-quote-right"></i>
    </h3>
    <div class="reward-content">
        
        <div class="reward-code">
            <img id="rewardCode" src="/blog/img/wechat.jpg" alt="打赏二维码">
        </div>
        
        <label class="reward-toggle">
            <input id="rewardToggle" type="checkbox" class="reward-toggle-check"
                data-wechat="/blog/img/wechat.jpg" data-alipay="/blog/img/alipay.jpg">
            <div class="reward-toggle-ctrol">
                <span class="reward-toggle-item wechat">微信</span>
                <span class="reward-toggle-label"></span>
                <span class="reward-toggle-item alipay">支付宝</span>
            </div>
        </label>
        
    </div>
</div>



</div>

        <footer class="footer">
    <div class="top">
        
<p>
    <span id="busuanzi_container_site_uv" style='display:none'>
        站点总访客数：<span id="busuanzi_value_site_uv"></span>
    </span>
    <span id="busuanzi_container_site_pv" style='display:none'>
        站点总访问量：<span id="busuanzi_value_site_pv"></span>
    </span>
</p>


        <p>
            
            <span>This blog is licensed under a <a rel="license noopener" href="https://creativecommons.org/licenses/by/4.0/" target="_blank">Creative Commons Attribution 4.0 International License</a>.</span>
        </p>
    </div>
    <div class="bottom">
        <p><span>Song Wani &copy; 2019 - 2021</span>
            <span>
                
                Power by <a href="http://hexo.io/" target="_blank">Hexo</a> Theme <a href="https://github.com/yscoder/hexo-theme-indigo" target="_blank">indigo</a>
            </span>
        </p>
    </div>
</footer>

    </main>
    <div class="mask" id="mask"></div>
<a href="javascript:;" id="gotop" class="waves-effect waves-circle waves-light"><span class="icon icon-lg icon-chevron-up"></span></a>



<div class="global-share" id="globalShare">
    <ul class="reset share-icons">
      <li>
        <a class="weibo share-sns" target="_blank" href="http://service.weibo.com/share/share.php?url=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/&title=《CSS3的再学习》 — SongKaBaKa&pic=https://gitee.com/songbug/blog.git/img/avatar.jpg" data-title="微博">
          <i class="icon icon-weibo"></i>
        </a>
      </li>
      <li>
        <a class="weixin share-sns wxFab" href="javascript:;" data-title="微信">
          <i class="icon icon-weixin"></i>
        </a>
      </li>
      <li>
        <a class="qq share-sns" target="_blank" href="http://connect.qq.com/widget/shareqq/index.html?url=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/&title=《CSS3的再学习》 — SongKaBaKa&source=" data-title=" QQ">
          <i class="icon icon-qq"></i>
        </a>
      </li>
      <li>
        <a class="facebook share-sns" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/" data-title=" Facebook">
          <i class="icon icon-facebook"></i>
        </a>
      </li>
      <li>
        <a class="twitter share-sns" target="_blank" href="https://twitter.com/intent/tweet?text=《CSS3的再学习》 — SongKaBaKa&url=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/&via=https://gitee.com/songbug/blog.git" data-title=" Twitter">
          <i class="icon icon-twitter"></i>
        </a>
      </li>
      <li>
        <a class="google share-sns" target="_blank" href="https://plus.google.com/share?url=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/" data-title=" Google+">
          <i class="icon icon-google-plus"></i>
        </a>
      </li>
    </ul>
 </div>


<div class="page-modal wx-share" id="wxShare">
    <a class="close" href="javascript:;"><i class="icon icon-close"></i></a>
    <p>扫一扫，分享到微信</p>
    <img src="//api.qrserver.com/v1/create-qr-code/?data=https://gitee.com/songbug/blog.git/2020/09/27/CSS3%E7%9A%84%E5%86%8D%E5%AD%A6%E4%B9%A0/" alt="微信分享二维码">
</div>




    <script src="//cdn.bootcss.com/node-waves/0.7.4/waves.min.js"></script>
<script>
var BLOG = { ROOT: '/blog/', SHARE: true, REWARD: true };


</script>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/main.min.js"></script>


<div class="search-panel" id="search-panel">
    <ul class="search-result" id="search-result"></ul>
</div>
<template id="search-tpl">
<li class="item">
    <a href="{path}" class="waves-block waves-effect">
        <div class="title ellipsis" title="{title}">{title}</div>
        <div class="flex-row flex-middle">
            <div class="tags ellipsis">
                {tags}
            </div>
            <time class="flex-col time">{date}</time>
        </div>
    </a>
</li>
</template>

<script src="//unpkg.com/hexo-theme-material-indigo@latest/js/search.min.js" async></script>






<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script>
(function() {
    var OriginTitile = document.title, titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '死鬼去哪里了！';
            clearTimeout(titleTime);
        } else {
            document.title = '(つェ⊂)咦!又好了!';
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            },2000);
        }
    });
})();
</script>



</body>
</html>
